<template>
	<view class="movice-item-style">
		<view class="index-orderlist" v-for="(itemname, indexname) in list" :key="indexname" style="padding: 20rpx 20rpx;"
		 @click="ordermovie_tiao(itemname)">
			<image :src="itemname.img" mode=""></image>
			<view class="index_font">
				<view class="index_font_top">
					<text>{{itemname.nm | ellipsis(7)}}</text>
					<view class="index_font_hua" v-if="itemname.version && !isSearch">
						<text class="hua_left">{{itemname.version | charToArray(" ")[0]}}</text>
						<text class="hua_right" v-if="versionLength(itemname)">
							{{itemname.version | charToArray(" ")[1]}}
						</text>
					</view>
				</view>
				<view class="index-font-two" v-if="isComing">
					<text style="font-weight: bold;color:#f37b1d ;">{{itemname.wish | trannumber}}</text>
					<text>人想看</text>
				</view>
				<view class="index-font-two" v-else>
					<text style="margin-right: 10rpx;">评分</text>
					<text style="font-weight: bold;color:#f37b1d ;">{{itemname.sc | toFixed(1)}}</text>
					<text>分</text>
				</view>
				<view class="index-font-three">
					<text>{{itemname.cat | shufilter('|', ' ', true)}}</text>
				</view>
				<view class="index-font-four">
					<text class="no-warp-one">演员：{{itemname.star}}</text>
				</view>
			</view>
			<button v-if="itemname.showst == 3" class="index-movie-yuan index-movie-red shadow" @click.stop="ordermovie_tiao(itemname)">
				<text>特惠</text>
			</button>
			<button v-if="itemname.showst == 4" class="index-movie-yuan index-movie-blue shadow" @click.stop="ordermovie_tiao(itemname)">
				<text>预售</text>
			</button>
			<button v-if="itemname.showst == 5 && !itemname.isLike" class="index-movie-yuan index-movie-cheng shadow" @click.stop="setMoviceLike(itemname, [clickIndex, indexname], 0)">
				<text>想看</text>
			</button>
			<button v-if="itemname.showst == 5 && itemname.isLike == 1" class="index-movie-yuan index-plain-cheng" @click.stop="setMoviceLike(itemname, [clickIndex, indexname], 1)">
				<text>已想</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			clickIndex: {
				type: [Number, String],
				default: 0
			},
			isComing: {
				type: Boolean,
				default: false
			},
			isSearch: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			// 即将上映跳转
			ordermovie_tiao(item) {
				switch (Number(item.showst)) {
					case 3:
						uni.navigateTo({
							url: `/subpages/detailed/detailed?mid=${item.mid}`
						})
						break
					case 4:
						uni.navigateTo({
							url: `/subpages/detailed/detailed?mid=${item.mid}`
						})
						break
					case 5:
						uni.navigateTo({
							url: `/subpages/wantsee/wantsee?mid=${item.mid}&s=${item.s}`
						})
						break
				}
			},
			//设置想看
			setMoviceLike(item, index, like) {
				uni.showLoading({
					title: '加载中'
				})
				item.isList = item.isList == 1 ? 0 : 1
				this.$api.setMoviceLike({
					mid: item.mid
				}).then(res => {
					this.$emit('change', like, index)
					uni.hideLoading()
				})
			},
			//判断长度
			versionLength(item) {
				let arr = this.$options.filters['charToArray'](item.version, " ")
				if(arr.length > 1){
					return true
				} else {
					return false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movice-item-style {
		.index-orderlist {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 2rpx solid #F3F3F3;
		}
	
		image {
			width: 140rpx;
			height: 185rpx;
			border-radius: 10rpx;
		}
	
		.index_font {
			margin-left: 25rpx;
			flex: 1;
			color: #6d6d6d;
			font-size: 26rpx;
	
			.index_font_top {
				display: flex;
				font-size: 30rpx;
				color: #000;
				font-weight: bold;
				align-items: center;
	
				.index_font_hua {
					font-size: 22rpx;
					font-weight: normal;
					border: 2rpx solid #B8B7B7;
					border-radius: 10rpx;
					margin-left: 10rpx;
					overflow: hidden;
	
					.hua_left {
						display: inline-block;
						color: #fff;
						background-color: #B9B8B8;
						padding: 0rpx 8rpx;
						box-sizing: border-box;
						// height: auto;
						height: 100%;
					}
	
					.hua_right {
						color: #A19F9F;
						padding: 0 8rpx;
					}
				}
			}
	
			.index-font-two {
				margin-top: 12rpx;
			}
	
			.index-font-three {
				margin-top: 6rpx;
			}
	
			.index-font-four {
				margin-top: 6rpx;
			}
	
			.no-warp-one {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>
